<template>
	<view class="wp" v-if="list.length>0">
		<scroll-view class="c_list" :style="{background:bg}" scroll-x="true">
			<text class="li_item" :class="{active:active===''}" @click="navTap({id:''})">今日特卖</text>
			<text class="li_item" :class="{active:active===item.id}" v-for="item in list" :key="item.id"
				@click="navTap(item)">{{item.title}}</text>

		</scroll-view>
		<uni-icons class="w_more" size="25" color="#fff" type="bars" @click="open"></uni-icons>
		<uni-popup ref="popup" type="bottom">
			<view class="more">
				<text v-for="item in list" :key="item.id" @click="navTap(item)">{{item.title}}</text>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	export default {
		name: 'nav_gate',
		props: {
			bg: {
				type: String,
				default: '#fff'
			},
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				active: '',
			}
		},
		methods: {
			open() {
				this.$refs.popup.open('top')
			},
			navTap(v) {
				// if (v.id === this.active) return;
				this.$refs.popup.close();
				this.active = v.id;
				this.$emit("change", v);
			}
		}
	}
</script>

<style lang="scss">
	.wp {
		position: relative;
	}

	.c_list {
		color: #fff;
		position: relative;
		white-space: nowrap;
		padding-right: 35px;

		.li_item {
			display: inline-block;
			line-height: 80upx;
			text-align: center;
			position: relative;
			margin-right: 20upx;
		}

		.active::after {
			border-bottom: 1px #fff solid;
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
		}

	}

	.w_more {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.more {
		background: #fff;
		position: absolute;
		top: 180upx;
		color: #303133;
		overflow: hidden;
		width: 100%;
		padding-bottom: 20upx;

		text {
			background: #fff;
			border: 1px #DCDFE6 solid;
			display: inline-block;
			margin: 20upx 0 0 20upx;
			width: calc((100% - 80upx)/3);
			text-align: center;
			padding: 2px 10upx;
		}
	}
</style>